import React from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './editor-styles.css';

const RichTextEditor = ({ value, onChange, height = '80%',width='50%' }) => {
    // 扩展后的工具栏配置，按功能分组
    const modules = {
        toolbar: [
            // 文本基础格式
            ['bold', 'italic', 'underline', 'strike'],
            ['blockquote', 'code-block'],

            // 标题和段落格式
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
            [{ 'font': [] }],
            [{ 'size': ['small', false, 'large', 'huge'] }],

            // 文本颜色和背景色
            [{ 'color': [] }, { 'background': [] }],

            // 列表和缩进
            [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }],
            [{ 'indent': '-1' }, { 'indent': '+1' }],
            // 对齐方式
            [{ 'align': [] }],
            // 插入内容
            ['link', 'image', 'video'],
            ['table', 'hr'],
            // 操作
            /*['undo', 'redo'],*/
            ['clean']
        ],
        // 历史记录配置
        history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
        }
    };

    // 自定义格式配置
    const formats = [
        'header', 'font', 'size',
        'bold', 'italic', 'underline', 'strike', 'blockquote',
        'list', 'bullet', 'check', 'indent',
        'link', 'image', 'video', 'table', 'hr',
        'color', 'background', 'align',
        'code-block'
    ];

    return (
        <div className="editor-wrapper border rounded-md overflow-hidden shadow-sm">
            <ReactQuill
                theme="snow"
                value={value}
                onChange={onChange}
                modules={modules}
                formats={formats}
                placeholder="开始输入内容..."
                style={{ height: height,width:width, minHeight: height,minWidth:width }}
                className="editor-content"
            />

            {/* 底部状态栏 */}
            <div className="editor-status-bar bg-gray-50 px-4 py-2 border-t text-sm text-gray-600 flex justify-between">
                {/*<div>
                    <span className="mr-4">字数: {value ? new DOMParser().parseFromString(value, 'text/html').body.textContent?.length || 0 : 0}</span>
                </div>
                <div>
                    <span className="text-gray-500">提示: 按 Ctrl+B 加粗，Ctrl+I 斜体</span>
                </div>*/}
            </div>
        </div>
    );
};

export default RichTextEditor;
